<!DOCTYPE html>
<html>
  <head>
	<title>Sortable Table using Polymer Web Components</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<script src="../../platform/platform.js"></script>
	<link rel="import" href="../sortable-table.html">
	<link rel="import" href="index-links.html">

	<style shim-shadowdom>
		sortable-table { width: 500px; margin-left: 65px; }
		sortable-table::shadow td.column-alice,
		sortable-table::shadow td.column-bill,
		sortable-table::shadow td.column-casey,
		sortable-table::shadow td.column-daisy,
		sortable-table::shadow td.column-ellie,
		sortable-table::shadow td.column-average,
		sortable-table::shadow td.column-total {
			text-align: right;
			padding-right: 5px;
			width: 100px;
			vertical-align: middle;
		}
	</style>
  </head>
  <body unresolved>

	<h2>Auto-Generated <code>columns</code></h2>
	If <code>columns</code> is omitted, and web component figures it out as best it can.

	<p>
	<pre>
	&lt;sortable-table&gt;
	[
		{ fruit: 'apple', alice: 4, bill: 10, casey: 2 },
		{ fruit: 'banana', alice: 0, bill: 4, casey: 0 },
		{ fruit: 'grape', alice: 2, bill: 3, casey: 5 },
		{ fruit: 'pear', alice: 4, bill: 2, casey: 8 },
		{ fruit: 'strawberry', alice: 0, bill: 14, casey: 0 }
	]	
	&lt;/sortable-table&gt;	
	</pre>
	<sortable-table defaultStyle>
	[
		{ fruit: 'apple', alice: 4, bill: 10, casey: 2 },
		{ fruit: 'banana', alice: 0, bill: 4, casey: 0 },
		{ fruit: 'grape', alice: 2, bill: 3, casey: 5 },
		{ fruit: 'pear', alice: 4, bill: 2, casey: 8 },
		{ fruit: 'strawberry', alice: 0, bill: 14, casey: 0 }
	]	
	</sortable-table>

	<p>

	<h2>Auto-Generated <code>columns</code> should accept missing fields</h2>
	If some rows are missing column fields, or named columns are out order things should still work.

	<p>

	<pre>
	&lt;sortable-table&gt;
	[
		{ fruit: 'apple', bill: 4, casey: 2, alice: 4 },
		{ alice: 0, bill: 4, fruit: 'banana', daisy: 0 },
		{ fruit: 'grape', alice: 2 },
		{ ellie: 2, alice: 4, fruit: 'pear' },
		{ fruit: 'strawberry', daisy: 2, bill: 14 }
	]	
	&lt;/sortable-table&gt;	
	</pre>
	<sortable-table defaultStyle>
	[
		{ fruit: 'apple', bill: 4, casey: 2, alice: 4 },
		{ alice: 0, bill: 4, fruit: 'banana', daisy: 0 },
		{ fruit: 'grape', alice: 2 },
		{ ellie: 2, alice: 4, fruit: 'pear' },
		{ fruit: 'strawberry', daisy: 2, bill: 14 }
	]	
	</sortable-table>

	<index-links page="autogenerated-columns.html"></index-links>
  </body>
</html>
